<template>
  <div v-if="show_content">
    <van-nav-bar
      :title="'答题('+current_item+'/'+all_item+')'"
      style="background: #fff;"
			@click-left="onClickLeft"
    />

    <div >
    	<div class="anser_item_page">
    		<p>
    			答题倒计时
    		</p>
    		<p>
    			{{day}}天 {{hour}}:{{min}}:{{second}}
    		</p>
    	</div>
    	<img src="../../assets/answerpageone.png" class="Img_content"/>
    </div>
    <!--
    	作者：offline
    	时间：2019-10-25
    	描述：问题答案
    -->
    <div class="answer_swiper" >
    	<van-button type="primary" size="small">{{questionObj.issue_type | showType}}</van-button>
    	<p class="p_content_item p_content_pcont">
    		{{questionObj.issue_content}}
    	</p>
      <van-checkbox-group v-model="result">

          <van-checkbox
            v-for="(answer,i) in questionObj.answers"
            :key="i"
            :name="answer.a_id">{{answer.answer_content}}</van-checkbox>

      </van-checkbox-group>






    	<!--
    	作者：offline
    	时间：2019-10-25
    	描述：正确答案
    -->
    <div class="footer_info">
    	<p class="" style="font-size: 14px;" v-show="show_right_tips">
    		<van-icon name="info" style="color: #4C9FFDFF;"/>
    		<span class="ques_answer" style="margin-left: 0vw;">作答正确</span>

    		<span class="quan_answer">
    			正确答案:{{show_right_answer}}
    		</span>
    	</p>
      <p class="p_error_content" style="font-size: 14px;" v-show="show_error_tips">
        <van-icon name="info" style="color: #FF4242;"/>
        <span class="ques_answer" style="margin-left: 0vw;color:#FF4242;">作答错误</span>

        <span class="quan_answer">
    			正确答案:{{show_right_answer}}
    		</span>
      </p>
    	<p class="p_content_pcontent" v-show="show_sure">
    		<van-button type="info" @click="sure">确认</van-button>
    	</p>
        <p class="p_content_pcontent" v-show="show_done">
        <van-button type="info" @click="done">完成</van-button>
      </p>
    </div>
  </div>
  </div>
</template>
<script>
    import { Dialog } from 'vant';
     export default {
        data(){
        	return{
              day: '0',
              hour: '00',
              min: '00',
              second: '00',
              result:[],
              right_answer_result:[],
              right_answer_result_content:[],
              show_right_answer:'',
              educationId:'',
              userId:'',
              show_content:false,
              beginTime:'',
              endTime:'',
              descr:'',
              issue_list:[],
              current_item:1,
              all_item:0,
              questionObj:"",
              show_right_tips:false,
              show_error_tips:false,
              show_sure:true,
              show_done:false,
              answer_count:0,
              all_count:0
        	}

        },
         mounted:function(){
            this.educationId=this.$route.query.educationId;
            this.userId=this.$route.query.userId;

            this.get_obj_data();


         },
         filters:{

             showType(type){

                 if(type=='1' ){
                     return "单选"
                 }else if(type=='2'){
                     return "多选"
                 }
                 return "";
             }


         },
        methods:{

            countTime () {
                // 获取当前时间
                let date = new Date()
                let now = date.getTime()
                // 设置截止时间
                //let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
                let end = this.endTime
                // 时间差
                let leftTime = end - now
                // 定义变量 d,h,m,s保存倒计时的时间
                if (leftTime >= 0) {
                    // 天
                    this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
                    // 时
                    let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
                    this.hour = h < 10 ? '0' + h : h
                    // 分
                    let m = Math.floor(leftTime / 1000 / 60 % 60)
                    this.min = m < 10 ? '0' + m : m
                    // 秒
                    let s = Math.floor(leftTime / 1000 % 60)
                    this.second = s < 10 ? '0' + s : s
                } else {
                    this.day = 0
                    this.hour = '00'
                    this.min = '00'
                    this.second = '00'
                }
                // 等于0的时候不调用
                if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
                    return
                } else {
                    // 递归每秒调用countTime方法，显示动态时间效果,
                    setTimeout(this.countTime, 1000)
                }
            },
        		onClickLeft(){

        		},
            sure(){

        		  console.log(this.result);
        		  let result = this.result.toString();

        		  let right_result = this.right_answer_result.toString();
              this.show_right_answer = this.right_answer_result_content.toString();
              console.log("result:"+result);
                console.log("right_result:"+right_result);
                console.log(result == right_result);
        		  if(result == right_result){
                  this.show_right_tips = true;
              }else{
                  this.show_error_tips = true;
              }
        		  this.show_sure = false;
              this.show_done=true;


            },
            done(){
        		    console.log("done_method");
                const that = this;
                let answerId = this.result.toString();
                let rightAnswers = this.right_answer_result.toString();
                let type =  answerId ==rightAnswers?"1":"2";
                let param = "userId="+that.userId+"&educationId="+that.educationId+"&issueId="+that.questionObj.issue_id+"&answerId="+answerId
                    +"&type="+type+"&rightAnswers="+rightAnswers;
                that.$sendRequest('/education/answer_save_integral',param).then(function(res){
                    console.log(res.data);

                    if(that.current_item == that.all_item){
                        that.$router.push({
                            path: '/answerquestion',
                            query:{educationId:that.educationId,userId:that.userId}
                        })
                        return false;
                    }

                    that.current_item++;
                    that.show_right_tips = false;
                    that.show_error_tips = false;
                    that.show_sure = true;
                    that.show_done=false;
                    that.questionObj =  that.issue_list[that.current_item-1];
                    that.result = [];
                    that.right_answer_result = [];
                    that.right_answer_result_content = [];
                    for(var i = 0;i<that.questionObj.answers.length;i++){
                        if(that.questionObj.answers[i].type ==1){
                            that.right_answer_result.push(that.questionObj.answers[i].a_id);
                            var v = parseInt(i)+1;
                            that.right_answer_result_content.push("答案"+v);
                        }
                    }
                    /*if(res.data.code ==0){

                    }else if(res.data.code ==2){

                    }*/
                })






            },
            get_obj_data(){
        		    const that = this;
        		    let param = "educationId="+that.educationId+"&userId="+that.userId;
                that.$sendRequest('/education/issue_list',param).then(function(res){
                    console.log(res.data);

                    if(res.data.code ==0){

                        that.beginTime = res.data.result.beginTime;
                        that.endTime = res.data.result.endTime;
                        that.descr = res.data.result.descr;
                        that.issue_list = res.data.result.issue_list;
                        that.all_item = that.issue_list.length;

                        //判断时间是否已过期
                        let date = new Date()
                        let now = date.getTime()
                        let end = that.endTime
                        // 时间差
                        let leftTime = end - now
                        if(leftTime <= 0){
                            that.show_content = false;
                            Dialog.alert({
                                message: "答题时间已到"
                            }).then(() => {
                                that.$router.push({
                                    path: '/answerquestion',
                                    query:{educationId:that.educationId,userId:that.userId}
                                })
                            })

                            return false;

                        }
                        let param2 = "userId="+that.userId+"&educationId="+that.educationId
                        that.$sendRequest('/education/user_answer_record',param2).then(function(res2){
                            console.log(res2.data);
                            if(res2.data.code == 0){
                                if(res2.data.result.answer_count == 0){
                                    that.show_content = true;
                                    that.questionObj=that.issue_list[that.current_item-1];
                                    for(var i = 0;i<that.questionObj.answers.length;i++){
                                        if(that.questionObj.answers[i].type ==1){
                                            that.right_answer_result.push(that.questionObj.answers[i].a_id);
                                            var v = parseInt(i)+1;
                                            that.right_answer_result_content.push("答案"+v);
                                        }
                                    }
                                    //开始倒计时
                                    that.countTime();
                                }else{
                                    if(res2.data.result.answer_count == res2.data.result.all_count){
                                        //弹窗提示，跳转到回答结果页面
                                        that.show_content = false;
                                        Dialog.alert({
                                            message: "你已答完全部问题"
                                        }).then(() => {
                                            that.$router.push({
                                                path: '/answerquestion',
                                                query:{educationId:that.educationId,userId:that.userId}
                                            })
                                        })
                                        return false;
                                    }else{
                                        that.show_content = true;
                                        that.current_item = res2.data.result.answer_count+1;
                                        that.questionObj=that.issue_list[that.current_item-1];
                                        for(var i = 0;i<that.questionObj.answers.length;i++){
                                            if(that.questionObj.answers[i].type ==1){
                                                that.right_answer_result.push(that.questionObj.answers[i].a_id);
                                                var v = parseInt(i)+1;
                                                that.right_answer_result_content.push("答案"+v);
                                            }
                                        }
                                        //开始倒计时
                                        that.countTime();
                                    }
                                }




                            }
                        })
                        Dialog.alert({
                            title: '注意事项',
                            message: that.descr
                        }).then(() => {

                        });

                    }else if(res.data.code ==2){
                        Dialog.alert({
                            title: '易分',
                            message: res.data.msg
                        }).then(() => {
                            // on close
                            that.$router.push({
                                path: '/Polulartion'
                            })
                        });
                    }

                })
            },
        	  onChange(event){
        	  	console.log(event);

        	  }
        	}

     }
</script>

<style scoped="scoped">
 .answer_swiper >>> .van-checkbox{
    width: 100%;
  }
	.p_content_pcont >>> .van-checkbox{
		border:1px solid #4C9FFDFF;
		border-radius: 50%;
		font-size: 16px;
	}
  .answer_swiper >>> .van-checkbox-group{
    padding: 2vh;
  }
 .answer_swiper >>> .van-checkbox__icon{
   display: inline-block !important;
 }
 .answer_swiper >>> .van-checkbox{
   margin-top: 2vh;
   margin-bottom: 2vh;
 }
	.p_content_pcont >>> .van-checkbox__icon{
		font-size: 16px;
	}
	.p_content_pcont span{
		width: 89%;
		vertical-align: top !important;
		margin-left: 2vw;
	}
	.footer_info{
		margin-top: 8vh;
		text-align: center;
		line-height: 6vh;
	}
	.footer_info>>>.van-icon{
		vertical-align: middle;
		color:#4C9FFDFF ;
	}
  .footer_info .p_error_content >>> .van-icon{
    color: #FF4242 !important;
  }
	.answer_swiper>>>.van-checkbox{
		    display: inline-block;
        vertical-align: middle;
	}
	.answer_swiper span{
		display: inline-block;
    vertical-align: middle;
   /* margin-left: 3vw;*/
	}
	.p_content_item{
		vertical-align: middle;
    width: 81%;
    display: inline-block;
    padding-top: 1vh;
    font-size: 16px;
    margin-left: 0vh;
	}
	.answer_swiper{
		text-align: left;
		padding: 2vh;
	}
	.anser_item_page{
		    position: absolute;
		    margin: 0;
		    padding: 0;
		    left: 40%;
		    color: #fff;
		    top:12%;
	}
	p{
		margin: 0;
		padding: 0;
	}
	.Img_content{
		width: 42vh;
    margin-top: 4vh;
	}
	.ques_answer{
		margin-right: 7vw;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(76,159,253,1);
	}
	.quan_answer{
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1)
	}
	.p_content_pcontent >>> .van-button--normal{
		padding: 0px 45px;
	}
	/*.p_content_pcont{
		display: flex;
		justify-content: flex-start;

	}*/

	/*.p_content_pcont>>> .van-checkbox{
		width: 8vw;
	}*/
</style>
